<template>
  <view style="position: relative;z-index: 9999;">
    <uv-popup position="bottom" :show="modelValue" @close="close" :round="10">
      <view class="dialogbox dialogbox2">
        <view class="dialogbox-title">请选择船公司</view>
        <view class="dialogbox-content dialogbox-content2">
          <!-- 搜索框 -->
          <view class="dialogbox-search">
            <uv-icon name="search" color="#C0C4CC" size="22" />
            <view class="searchinput">
              <uv-input v-model="value" @change="inputEvent" clearable customStyle="height: 100%;"
                placeholder="请输入船公司中文/英文名称" border="none"></uv-input>
            </view>
          </view>
          <view class="list-container">
            <view class="list-item-ship" v-for="item in shipList" @click="checkShip(item)">
              <view style="color: #333333;">{{item.Code}}</view>
              <view style="color: #9b9b9b;">{{item.CnShippingName}}</view>
            </view>
            <uv-empty v-if="shipList.length==0" mode="search" />
          </view>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script>
	import request from '@/utils/request'
	export default{
		props:{
			modelValue:{
				type:Boolean,
				default:false
			},
			code:{
				type:String,
				default:''
			}
		},
		data(){
			return{
				value:'',
				shipList:[],
				originShipList:[]
			}
		},
		watch:{
			code(){
				if(!this.$props.code) return
				const item=this.originShipList.find(t=>t.Code==this.$props.code)
				if(item){
					this.$emit('change',item)
				}
			}
		},
		methods:{
			close(){
				this.$emit('update:modelValue',false)
			},
			inputEvent(e){
				this.getShipList()
			},
			getShipList(){
				request.get('/api/FRShipping/GetShippingList',{
				        ShippingSimName: this.value,
				        Page: 1,
				        limit: -1
				      }).then((res) => {
						  this.shipList= res.Rows
				      })
			},
			getOriginShipList(){
				request.get('/api/FRShipping/GetShippingList',{
				        ShippingSimName: '',
				        Page: 1,
				        limit: -1
				      }).then((res) => {
						  this.originShipList= res.Rows
				      })
			},
			checkShip(e){
				this.$emit('change',e)
				this.close()
			}
		},
		created(){
			this.getShipList()
			this.getOriginShipList()
		}
	}
</script>

<style scoped lang="scss">
/* components/AppShip/AppShip.wxss */
.dialogbox {
  width: 100%;
  height: 100%;
}

.dialogbox2 {
  padding: 0;
}

.dialogbox-title {
  height: 80rpx;
  line-height: 100rpx;
  font-size: 32rpx;
  color: #0F294D;
  padding: 0 30rpx;
}

.dialogbox2 .dialogbox-title,
.dialogbox2 .dialogbox-content {
  box-sizing: border-box;
}

.dialogbox-content2 {
  margin-bottom: 15rpx;
}

.dialogbox-search {
  height: 74rpx;
  background: #f4f4f4;
  border-radius: 10rpx;
  display: flex;
  margin: 20rpx 30rpx;
  box-sizing: border-box;
  padding: 0 5px;
}

.dialogbox-search van-icon {
  margin: 0 16rpx;
}

.searchinput {
  flex: 1;
  height: 74rpx;
  line-height: 74rpx;
}

.list-container {
  padding-top: 15rpx;
  height: 600rpx;
  overflow: auto;
}

.list-item-ship {
  height: 80rpx;
  width: 100%;
  border-bottom: 1rpx solid #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.list-item-ship:active {
  background-color: #f2f3f5;
}
</style>